<script setup lang="ts">
import { ref } from "vue";
import DynamicForm from "@/components/DynamicForm/index.vue";
import DynamicTable from "@/components/DynamicTable/index.vue";
import type { DynamicFormInstance } from "@/components/DynamicForm/types";

defineProps<{
  task?: string;
}>();

const searchFormRef = ref<DynamicFormInstance>();
const searchFormData = ref<{ pushStatus?: string }>({});

const searchFormConfig = [
  {
    key: "pushStatus",
    name: "推送状态",
    type: "select" as const,
    span: 8,
    options: [
      { label: "全部", value: "" },
      { label: "已推送", value: "pushed" },
      { label: "未推送", value: "not_pushed" },
      { label: "推送失败", value: "failed" },
    ],
  },
];

const handleSearch = () => {
  console.log("搜索:", searchFormData.value);
};

const handleReset = () => {
  searchFormRef.value?.resetFields();
};
</script>

<template>
  <div>
    <el-card shadow="never">
      <div class="search-form-container">
        <DynamicForm
          ref="searchFormRef"
          v-model="searchFormData"
          :form-config="searchFormConfig"
          :gutter="16"
          label-width="80px"
          type="search"
          @search="handleSearch"
          @reset="handleReset"
        />
      </div>
    </el-card>

    <el-card shadow="never" class="mt-4">
      <div style="text-align: center; padding: 50px 0">
        <p style="color: #909399">推送展示内容待开发</p>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card__header) {
}

.search-form-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mt-4 {
  margin-top: 16px;
}
</style>
